<template>
  <div class="wrap">

    <SkyCardPanel title="空列表">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" :data="emptyData">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //空数据列表
            &lt;sky-table v-slot="row" :data="emptyData" &gt;
              &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" label="操作"&gt;
                &lt;div class="tools"&gt;
                  &lt;a&gt;分摊&lt;/a&gt;
                  &lt;a&gt;查看分摊&lt;/a&gt;
                &lt;/div&gt;
              &lt;/sky-column&gt;
            &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //普通使用
              
              export default {
                data () {
                  return {
                      emptyData: [],
                  }
                }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="普通使用">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" :data="tableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="index" width="80" align="center" label="索引">
            <span>{{row.index}}</span>
          </sky-column>
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //普通使用
              
              &lt;sky-table v-slot="row" :data="tableData"  @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="index" width="80" align="center"  label="索引"&gt;
                  使用索引时双括号包裹 此处模板原因无法填入 
                  &lt;span&gt;row.index&lt;/span&gt;
                &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //普通使用
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="自定义列排序">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row"  :data="tableData" @getCurrent="getCurrent">

           <component :is="componentName" v-for="col in sortCol" :key="col.prop" :row="row.scope" :prop="col.prop" :label="col.label">

            <template v-if="col.prop=='name'">{{row.scope['name']}}</template>
            <template v-if="col.prop=='type'">{{row.scope['type']}}</template>
            <template v-if="col.prop=='havemoney'">{{row.scope['havemoney']}}</template>
            <template v-if="col.prop=='waitmoney'">{{row.scope['waitmoney']}}</template>

           </component>
          <!-- 
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          -->
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //列排序
            &lt;sky-table v-slot="row"  :data="tableData" @getCurrent="getCurrent"&gt;

              &lt;component 
                :is="componentName"
                v-for="col in sortCol"
                :key="col.prop" 
                :row="row.scope" 
                :prop="col.prop" 
                :label="col.label"
              &gt;

                &lt;template v-if="col.prop=='name'"&gt;&lt;/template&gt;
                &lt;template v-if="col.prop=='type'"&gt;}&lt;/template&gt;
                &lt;template v-if="col.prop=='havemoney'"&gt;&lt;/template&gt;
                &lt;template v-if="col.prop=='waitmoney'"&gt;&lt;/template&gt;

              &lt;/component&gt;
              &lt;!-- 
              &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
              &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
              --&gt;
              &lt;sky-column :row="row.scope" label="操作"&gt;
                &lt;div class="tools"&gt;
                  &lt;a&gt;分摊&lt;/a&gt;
                  &lt;a&gt;查看分摊&lt;/a&gt;
                &lt;/div&gt;
              &lt;/sky-column&gt;
            &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //列排序
              
              export default {
                data () {
                  return {
                      componentName:'skyColumn',
                      sortCol: [
                      {
                        prop: 'type',
                        label: '单据类型'
                      },
                      {
                        prop: 'havemoney',
                        label: '已分摊金额'
                      },
                      {
                        prop: 'name',
                        label: '名称'
                      },
                      {
                        prop: 'waitmoney',
                        label: '未分摊金额'
                      }
                    ],
                     tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          disabled: true,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>


    <SkyCardPanel title="滚动屏">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" SelfRoll FixedHead maxheight="200" :data="selfscrolltableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //滚动屏
              
        &lt;sky-table v-slot="row" SelfRoll FixedHead maxheight="200" :data="selfscrolltableData" @getCurrent="getCurrent"&gt;
          &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
          &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
          &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
          &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
          &lt;sky-column :row="row.scope" label="操作"&gt;
            &lt;div class="tools"&gt;
              &lt;a&gt;分摊&lt;/a&gt;
              &lt;a&gt;查看分摊&lt;/a&gt;
            &lt;/div&gt;
          &lt;/sky-column&gt;
        &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //滚动屏
              
              export default {
                data () {
                  return {
                      //滚动数据
                      selfscrolltableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '5',
                          name: '人防工程监理(5)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '6',
                          name: '人防工程监理(6)',
                          type: '单据类型',
                          havemoney: 6,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '7',
                          name: '人防工程监理(7)',
                          type: '单据类型',
                          havemoney: 7,
                          waitmoney: '200,000.00',
                        },
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="全屏表格">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" Screenfull :data="tableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //全屏表格
              
              &lt;sky-table v-slot="row" Screenfull :data="tableData"  @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //全屏表格
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="可拖拽列宽">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" DropWidth :data="tableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //可拖拽列宽
              
              &lt;sky-table v-slot="row" DropWidth :data="tableData"  @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //普通使用
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="带序号">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" :data="tableData" SequenceNumber @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称">
            <sky-input v-model="row.scope.name" placeholder="请输入内容">
              <sky-icon-font name="ling" slot="suffix" style="font-size:8px"></sky-icon-font>
            </sky-input>
          </sky-column>
          <sky-column :row="row.scope" prop="type" required label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //带序号
              
              &lt;sky-table v-slot="row" :data="tableData" SequenceNumber  @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;
                  &lt;sky-input v-model="row.scope.name" placeholder="请输入内容"&gt;
                     &lt;sky-icon-font name="ling" slot="suffix" style="font-size:8px"&gt;&lt;/sky-icon-font&gt;
                  &lt;/sky-input&gt;
                &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" required label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //带序号
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="固定表头">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" FixedHead maxheight="200" :data="fixedheadtableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额" align='right'></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额" align='right'></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //固定表头
              
              &lt;sky-table v-slot="row" FixedHead maxheight="200" :data="fixedheadtableData" @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额" align='right'&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额" align='right'&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //固定表头
              
              export default {
                data () {
                  return {
                      //固定表头
                      fixedheadtableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '5',
                          name: '人防工程监理(5)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '6',
                          name: '人防工程监理(6)',
                          type: '单据类型',
                          havemoney: 6,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '7',
                          name: '人防工程监理(7)',
                          type: '单据类型',
                          havemoney: 7,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '8',
                          name: '人防工程监理(8)',
                          type: '单据类型',
                          havemoney: 8,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="固定列">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" FixedColumn TableWidth="2000" :data="fixedcolumntableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称" width="300" fixed></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="project1" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project2" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project3" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project4" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project5" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project6" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project7" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project8" label="项目"></sky-column>
          <sky-column :row="row.scope" prop="project9" label="项目"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //固定列
              
              &lt;sky-table v-slot="row" FixedColumn TableWidth="2000" :data="fixedcolumntableData" @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称" width="300" fixed&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project1" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project2" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project3" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project4" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project5" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project6" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project7" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project8" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="project9" label="项目"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //固定列
              
              export default {
                data () {
                  return {
                      //固定列
                      fixedcolumntableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          project1: 1111,
                          project2: 2222,
                          project3: 3333,
                          project4: 4444,
                          project5: 5555,
                          project6: 6666,
                          project7: 7777,
                          project8: 8888,
                          project9: 9999,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          project1: 1111,
                          project2: 2222,
                          project3: 3333,
                          project4: 4444,
                          project5: 5555,
                          project6: 6666,
                          project7: 7777,
                          project8: 8888,
                          project9: 9999,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          project1: 1111,
                          project2: 2222,
                          project3: 3333,
                          project4: 4444,
                          project5: 5555,
                          project6: 6666,
                          project7: 7777,
                          project8: 8888,
                          project9: 9999,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          project1: 1111,
                          project2: 2222,
                          project3: 3333,
                          project4: 4444,
                          project5: 5555,
                          project6: 6666,
                          project7: 7777,
                          project8: 8888,
                          project9: 9999,
                          waitmoney: '200,000.00',
                        }
                      ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="多选框&&禁用部分选择框">
      <div slot="header-right">
        <SkyButton type="primary" @click="defaultSelect">默认勾选第一 第二</SkyButton>
      </div>
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" ref="moreSelect" showcheckbox :data="tableData" @selection-change="handleSelectionChange" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //多选框&&禁用部分选择框

              &lt;SkyButton type="primary" @click="defaultSelect"&gt;默认勾选第一 第二&lt;/SkyButton&gt;

              &lt;sky-table v-slot="row" showcheckbox :data="tableData" @selection-change="handleSelectionChange" @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //多选框&&禁用部分选择框
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          disabled: true,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                      multipleSelection: []
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },
                      handleSelectionChange (val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                      },
                      defaultSelect () {
                        this.$refs.moreSelect.initCheckSelect([1, 2])
                      }

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="可排序&&单选">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" showcheckbox MultipleChoice :sort="['havemoney']" @selection-change="handleSelectionChange" :data="tableData2" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //可排序&&单选
              
              &lt;sky-table v-slot="row" showcheckbox  MultipleChoice  :sort="['havemoney']" @selection-change="handleSelectionChange" :data="tableData" @getCurrent="getCurrent"&gt;
                &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                &lt;sky-column :row="row.scope" label="操作"&gt;
                  &lt;div class="tools"&gt;
                    &lt;a&gt;分摊&lt;/a&gt;
                    &lt;a&gt;查看分摊&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/sky-column&gt;
              &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //可排序
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          disabled: true,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                      multipleSelection: []
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },
                      handleSelectionChange (val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                      }

                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="固定多列" class="card-main">

      <!-- 主题部分 -->
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" FixedColumn TableWidth="3000" SequenceNumber :data="tableList">
          <sky-column :row="row.scope" prop="status" label="状态" width="100" fixedLeftWidth="60" fixed></sky-column>
          <sky-column :row="row.scope" prop="conId" label="合同编号" width="150" fixedLeftWidth="160" fixed></sky-column>
          <sky-column :row="row.scope" prop="conName" label="合同名称" width="180" fixedLeftWidth="310" fixed></sky-column>
          <sky-column :row="row.scope" prop="proName" label="项目名称" width="180"></sky-column>
          <sky-column :row="row.scope" prop="partyAUnit" label="甲方单位"></sky-column>
          <sky-column :row="row.scope" prop="partyBUnit" label="乙方单位"></sky-column>
          <sky-column :row="row.scope" prop="signedAmountA" label="签订金额（含税）" align="right"></sky-column>
          <sky-column :row="row.scope" prop="signedAmountB" label="签订金额（不含税）" align="right"></sky-column>
          <sky-column :row="row.scope" prop="conAmout1" label="预计合同金额" align="right"></sky-column>
          <sky-column :row="row.scope" prop="conAmout2" label="联系单确认金额" align="right"></sky-column>
          <sky-column :row="row.scope" prop="conAmout3" label="累计产值" align="right"></sky-column>
          <sky-column :row="row.scope" prop="conAmout4" label="累计实付" align="right"></sky-column>
          <sky-column :row="row.scope" prop="conAmout5" label="结算金额" align="right"></sky-column>
          <sky-column :row="row.scope" prop="signedMan" label="签约人" width="160"></sky-column>
          <sky-column :row="row.scope" prop="signedTime" label="签约时间" width="200"></sky-column>
          <sky-column :row="row.scope" prop="auditTime" label="审核时间" width="200"></sky-column>
          <sky-column :row="row.scope" prop="supplierPerson" label="供方联系人" width="150"></sky-column>
          <sky-column :row="row.scope" prop="supplierPersonTel" label="供方联系人手机号码" width="200"></sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //固定多列
              
                &lt;sky-table v-slot="row" FixedColumn TableWidth="3000" SequenceNumber :data="tableList"&gt;
                  &lt;sky-column :row="row.scope" prop="status" label="状态" width="100" fixedLeftWidth="60" fixed&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conId" label="合同编号" width="150" fixedLeftWidth="160" fixed&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conName" label="合同名称" width="180" fixedLeftWidth="310" fixed&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="proName" label="项目名称" width="180"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="partyAUnit" label="甲方单位"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="partyBUnit" label="乙方单位"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="signedAmountA" label="签订金额（含税）" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="signedAmountB" label="签订金额（不含税）" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conAmout1" label="预计合同金额" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conAmout2" label="联系单确认金额" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conAmout3" label="累计产值" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conAmout4" label="累计实付" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="conAmout5" label="结算金额" align="right"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="signedMan" label="签约人" width="160"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="signedTime" label="签约时间" width="200"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="auditTime" label="审核时间" width="200"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="supplierPerson" label="供方联系人" width="150"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="supplierPersonTel" label="供方联系人手机号码" width="200"&gt;&lt;/sky-column&gt;
                &lt;/sky-table&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //固定多列
              
              export default {
                data () {
                  return {
                      tableList: [
                        {
                          id: "1",
                          status: "已审批",
                          conId: "htbh001",
                          conName: "湖畔花园项目一期合同",
                          proName: "湖畔花园项目一期",
                          partyAUnit: "阿里置业",
                          partyBUnit: "上海二建集团",
                          signedAmountA: "20000",
                          signedAmountA: "20000",
                          conAmout1: "20000",
                          conAmout2: "20000",
                          conAmout3: "20000",
                          conAmout4: "20000",
                          conAmout4: "20000",
                          conAmout5: "20000",
                          signedMan: "200,000.00",
                          signedTime: "2020-10-13",
                          auditTime: "2020-10-13",
                          supplierPerson: "张三",
                          supplierPersonTel: "1234567890"
                        },
                        {
                          id: "2",
                          status: "已审批",
                          conId: "htbh002",
                          conName: "湖畔花园项目一期合同",
                          proName: "湖畔花园项目一期",
                          partyAUnit: "阿里置业",
                          partyBUnit: "上海二建集团",
                          signedAmountA: "20000",
                          signedAmountA: "20000",
                          conAmout1: "20000",
                          conAmout2: "20000",
                          conAmout3: "20000",
                          conAmout4: "20000",
                          conAmout4: "20000",
                          conAmout5: "20000",
                          signedMan: "200,000.00",
                          signedTime: "2020-10-13",
                          auditTime: "2020-10-13",
                          supplierPerson: "张三",
                          supplierPersonTel: "1234567890"
                        },
                        {
                          id: "3",
                          status: "已审批",
                          conId: "htbh003",
                          conName: "湖畔花园项目一期合同",
                          proName: "湖畔花园项目一期",
                          partyAUnit: "阿里置业",
                          partyBUnit: "上海二建集团",
                          signedAmountA: "20000",
                          signedAmountA: "20000",
                          conAmout1: "20000",
                          conAmout2: "20000",
                          conAmout3: "20000",
                          conAmout4: "20000",
                          conAmout4: "20000",
                          conAmout5: "20000",
                          signedMan: "200,000.00",
                          signedTime: "2020-10-13",
                          auditTime: "2020-10-13",
                          supplierPerson: "张三",
                          supplierPersonTel: "1234567890"
                        },
                        {
                          id: "4",
                          status: "已审批",
                          conId: "htbh004",
                          conName: "湖畔花园项目一期合同",
                          proName: "湖畔花园项目一期",
                          partyAUnit: "阿里置业",
                          partyBUnit: "上海二建集团",
                          signedAmountA: "20000",
                          signedAmountA: "20000",
                          conAmout1: "20000",
                          conAmout2: "20000",
                          conAmout3: "20000",
                          conAmout4: "20000",
                          conAmout4: "20000",
                          conAmout5: "20000",
                          signedMan: "200,000.00",
                          signedTime: "2020-10-13",
                          auditTime: "2020-10-13",
                          supplierPerson: "张三",
                          supplierPersonTel: "1234567890"
                        }
                      ],
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },
                    }
              }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="多级表头">
      <div slot="main" class="containter-table">
        <sky-table v-slot="row" :SelfTheadConfig="SelfTheadConfig" :data="tableData" @getCurrent="getCurrent">
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型"> </sky-column>
          <sky-column :row="row.scope" prop="havemoney" label="已分摊金额"></sky-column>
          <sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //多级表头
              
                &lt;sky-table v-slot="row" :SelfTheadConfig="SelfTheadConfig" :data="tableData"  @getCurrent="getCurrent"&gt;
                  &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/sky-column&gt;
                  &lt;sky-column :row="row.scope" label="操作"&gt;
                    &lt;div class="tools"&gt;
                      &lt;a&gt;分摊&lt;/a&gt;
                      &lt;a&gt;查看分摊&lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/sky-column&gt;
                &lt;/sky-table&gt;
                      
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //多级表头
              
              export default {
                data () {
                  return {
                      tableData: [
                        {
                          id: '1',
                          name: '人防工程监理(1)',
                          type: '单据类型',
                          havemoney: 1,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '2',
                          name: '人防工程监理(2)',
                          type: '单据类型',
                          havemoney: 2,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '3',
                          name: '人防工程监理(3)',
                          type: '单据类型',
                          havemoney: 3,
                          waitmoney: '200,000.00',
                        },
                        {
                          id: '4',
                          name: '人防工程监理(4)',
                          type: '单据类型',
                          havemoney: 4,
                          waitmoney: '200,000.00',
                        }
                      ],
                      SelfTheadConfig: [
                                [
                                  {
                                    title: '名称',
                                    colspan: 1,
                                    rowspan: 3,
                                    align: 'center'
                                  },
                                  {
                                    title: '详情',
                                    colspan: 4,
                                    rowspan: 1,
                                    align: 'center'
                                  },
                                ],
                                [
                                  {
                                    title: '单据类别',
                                    colspan: 1,
                                    rowspan: 2,
                                    align: 'center'
                                  },
                                  {
                                    title: '金额',
                                    colspan: 3,
                                    rowspan: 1,
                                    align: 'center',
                                    background:"#1890ff",
                                    color:"white"
                                  },
                                ],
                                [
                                  {
                                    title: '已分摊金额',
                                    colspan: 1,
                                    rowspan: 1,
                                    align: 'center',
                                    required:true,
                                    background:"#1890ff",
                                    color:"white"
                                  },
                                  {
                                    title: '未分摊金额',
                                    colspan: 1,
                                    rowspan: 1,
                                    align: 'center',
                                    background:"#1890ff",
                                    color:"white"
                                  },
                                  {
                                    title: '操作',
                                    colspan: 1,
                                    rowspan: 1,
                                    align: 'center',
                                    background:"#1890ff",
                                    color:"white"
                                  },
                                ],

                              ],
                  }
                },
                  methods: {
                      getCurrent (row, eventType) {
                        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                        console.log(row)
                      },

                    }
              }
              
          </code>
      </pre>
      </div>

    </SkyHiddenPanel>


  </div>
</template>

<script>
  export default {
    data () {
      return {
        emptyData: [],
        SelfTheadConfig: [
          [
            {
              title: '名称',
              colspan: 1,
              rowspan: 3,
              align: 'center'
            },
            {
              title: '详情',
              colspan: 4,
              rowspan: 1,
              align: 'center'
            },
          ],
          [
            {
              title: '单据类别',
              colspan: 1,
              rowspan: 2,
              align: 'center'
            },
            {
              title: '金额',
              colspan: 3,
              rowspan: 1,
              align: 'center',
              background:"#1890ff",
              color:"white"
            },
          ],
          [
            {
              title: '已分摊金额',
              colspan: 1,
              rowspan: 1,
              align: 'center',
              required:true,
              background:"#1890ff",
              color:"white"
            },
            {
              title: '未分摊金额',
              colspan: 1,
              rowspan: 1,
              align: 'center',
              background:"#1890ff",
              color:"white"
            },
            {
              title: '操作',
              colspan: 1,
              rowspan: 1,
              align: 'center',
              background:"#1890ff",
              color:"white"
            },
          ],

        ],
        tableData: [
          {
            id: '1',
            name: '人防工程监理(1)',
            type: '单据类型顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶',
            havemoney: 1,
            waitmoney: '200,000.00',
          },
          {
            id: '2',
            name: '人防工程监理(2)',
            type: '单据类型',
            havemoney: 2,
            waitmoney: '200,000.00',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
            type: '单据类型',
            havemoney: 3,
            disabled: true,
            waitmoney: '200,000.00',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          }
        ],
        tableData2: [
          {
            id: '1',
            name: '人防工程监理(1)',
            type: '单据类型',
            havemoney: 1,
            waitmoney: '200,000.00',
          },
          {
            id: '2',
            name: '人防工程监理(2)',
            type: '单据类型',
            havemoney: 2,
            waitmoney: '200,000.00',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
            type: '单据类型',
            havemoney: 3,
            disabled: true,
            waitmoney: '200,000.00',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          }
        ],
        //滚动数据
        selfscrolltableData: [
          {
            id: '1',
            name: '人防工程监理(1)',
            type: '单据类型',
            havemoney: 1,
            waitmoney: '200,000.00',
          },
          {
            id: '2',
            name: '人防工程监理(2)',
            type: '单据类型',
            havemoney: 2,
            waitmoney: '200,000.00',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
            type: '单据类型',
            havemoney: 3,
            waitmoney: '200,000.00',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          },
          {
            id: '5',
            name: '人防工程监理(5)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          },
          {
            id: '6',
            name: '人防工程监理(6)',
            type: '单据类型',
            havemoney: 6,
            waitmoney: '200,000.00',
          },
          {
            id: '7',
            name: '人防工程监理(7)',
            type: '单据类型',
            havemoney: 7,
            waitmoney: '200,000.00',
          },
        ],
        //固定表头
        fixedheadtableData: [
          {
            id: '1',
            name: '人防工程监理(1)',
            type: '单据类型',
            havemoney: 1,
            waitmoney: '200,000.00',
          },
          {
            id: '2',
            name: '人防工程监理(2)',
            type: '单据类型',
            havemoney: 2,
            waitmoney: '200,000.00',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
            type: '单据类型',
            havemoney: 3,
            waitmoney: '200,000.00',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          },
          {
            id: '5',
            name: '人防工程监理(5)',
            type: '单据类型',
            havemoney: 4,
            waitmoney: '200,000.00',
          },
          {
            id: '6',
            name: '人防工程监理(6)',
            type: '单据类型',
            havemoney: 6,
            waitmoney: '200,000.00',
          },
          {
            id: '7',
            name: '人防工程监理(7)',
            type: '单据类型',
            havemoney: 7,
            waitmoney: '200,000.00',
          },
          {
            id: '8',
            name: '人防工程监理(8)',
            type: '单据类型',
            havemoney: 8,
            waitmoney: '200,000.00',
          }
        ],
        //固定列
        fixedcolumntableData: [
          {
            id: '1',
            name: '人防工程监理(1)',
            type: '单据类型',
            havemoney: 1,
            project1: 1111,
            project2: 2222,
            project3: 3333,
            project4: 4444,
            project5: 5555,
            project6: 6666,
            project7: 7777,
            project8: 8888,
            project9: 9999,
            waitmoney: '200,000.00',
          },
          {
            id: '2',
            name: '人防工程监理(2)',
            type: '单据类型',
            havemoney: 2,
            project1: 1111,
            project2: 2222,
            project3: 3333,
            project4: 4444,
            project5: 5555,
            project6: 6666,
            project7: 7777,
            project8: 8888,
            project9: 9999,
            waitmoney: '200,000.00',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
            type: '单据类型',
            havemoney: 3,
            project1: 1111,
            project2: 2222,
            project3: 3333,
            project4: 4444,
            project5: 5555,
            project6: 6666,
            project7: 7777,
            project8: 8888,
            project9: 9999,
            waitmoney: '200,000.00',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
            type: '单据类型',
            havemoney: 4,
            project1: 1111,
            project2: 2222,
            project3: 3333,
            project4: 4444,
            project5: 5555,
            project6: 6666,
            project7: 7777,
            project8: 8888,
            project9: 9999,
            waitmoney: '200,000.00',
          }
        ],
        tableList: [
          {
            id: "1",
            status: "已审批",
            conId: "htbh001",
            conName: "湖畔花园项目一期合同",
            proName: "湖畔花园项目一期",
            partyAUnit: "阿里置业",
            partyBUnit: "上海二建集团",
            signedAmountA: "20000",
            signedAmountA: "20000",
            conAmout1: "20000",
            conAmout2: "20000",
            conAmout3: "20000",
            conAmout4: "20000",
            conAmout4: "20000",
            conAmout5: "20000",
            signedMan: "200,000.00",
            signedTime: "2020-10-13",
            auditTime: "2020-10-13",
            supplierPerson: "张三",
            supplierPersonTel: "1234567890"
          },
          {
            id: "2",
            status: "已审批",
            conId: "htbh002",
            conName: "湖畔花园项目一期合同",
            proName: "湖畔花园项目一期",
            partyAUnit: "阿里置业",
            partyBUnit: "上海二建集团",
            signedAmountA: "20000",
            signedAmountA: "20000",
            conAmout1: "20000",
            conAmout2: "20000",
            conAmout3: "20000",
            conAmout4: "20000",
            conAmout4: "20000",
            conAmout5: "20000",
            signedMan: "200,000.00",
            signedTime: "2020-10-13",
            auditTime: "2020-10-13",
            supplierPerson: "张三",
            supplierPersonTel: "1234567890"
          },
          {
            id: "3",
            status: "已审批",
            conId: "htbh003",
            conName: "湖畔花园项目一期合同",
            proName: "湖畔花园项目一期",
            partyAUnit: "阿里置业",
            partyBUnit: "上海二建集团",
            signedAmountA: "20000",
            signedAmountA: "20000",
            conAmout1: "20000",
            conAmout2: "20000",
            conAmout3: "20000",
            conAmout4: "20000",
            conAmout4: "20000",
            conAmout5: "20000",
            signedMan: "200,000.00",
            signedTime: "2020-10-13",
            auditTime: "2020-10-13",
            supplierPerson: "张三",
            supplierPersonTel: "1234567890"
          },
          {
            id: "4",
            status: "已审批",
            conId: "htbh004",
            conName: "湖畔花园项目一期合同",
            proName: "湖畔花园项目一期",
            partyAUnit: "阿里置业",
            partyBUnit: "上海二建集团",
            signedAmountA: "20000",
            signedAmountA: "20000",
            conAmout1: "20000",
            conAmout2: "20000",
            conAmout3: "20000",
            conAmout4: "20000",
            conAmout4: "20000",
            conAmout5: "20000",
            signedMan: "200,000.00",
            signedTime: "2020-10-13",
            auditTime: "2020-10-13",
            supplierPerson: "张三",
            supplierPersonTel: "1234567890"
          }
        ],
        multipleSelection: [],
        componentName:'skyColumn',
        sortCol: [
        {
          prop: 'type',
          label: '单据类型'
        },
        {
          prop: 'havemoney',
          label: '已分摊金额'
        },
        {
          prop: 'name',
          label: '名称'
        },
        {
          prop: 'waitmoney',
          label: '未分摊金额'
        }
      ]
      }
    },
    methods: {
      getCurrent (row, eventType) {
        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
        console.log(row)
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      defaultSelect () {
        this.$refs.moreSelect.initCheckSelect([1, 2])
      }

    },
  }
</script>

<style lang='scss' scoped>
 ;</style>